<template>
	<view>
		<view class='coupon-list-window' :class='[waitPay.waitPay==true?"on":"",waitPay.waitPay==true?"cart":""]'>
			<view class='title'>提前还款<text class='iconfont icon-guanbi' @click='close'></text></view>
			<!-- <view v-if="coupon.count" class="occupy"></view> -->
			<scroll-view class="coupon-list" scroll-y="true" >
				<view class="data-list">
					<view class="item" v-for="(item, index) in waitPay.list">
						<view class="content">
							<view class="left" @click="selectId(index)">
								<image v-if="item.select && appType == 1" class="check-img" src="../../static/images/ic-check1.png"></image>
								<image v-else-if="item.select && appType == 2" class="check-img" src="../../static/images/ic-check2.png"></image>
								<image v-else-if="item.select" class="check-img" src="../../static/images/ic-check.png"></image>
								<image v-else class="check-img" src="../../static/images/ic-uncheck.png"></image>
							</view>
							<view class="middle">
								<text v-if="item.is_first == 1" class="count">首期支付 {{item.stage}}/{{item.count}}期</text>
								<text v-else class="count">{{item.stage}}/{{item.count}}期</text>
								<view class="time">{{item.end_date}}前，<text class="red"><text class="red" v-if="item.is_overdue">逾期</text>待还</text></view>
							</view>
							<view class="right">
								<view class="num">¥{{item.stage_price}}</view>
								<view class="money-add">含租金¥{{item.stage_price}}<text v-if="item.is_overdue">+违约金¥{{item.overdue_price}}</text></view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="height: 48rpx;"></view>
				
				<!-- 无优惠券 -->
				<!-- <view class='pictrue' v-else> -->
					<!-- <image :src="imgHost + '/statics/images/noCoupon.png'"></image> -->
				<!-- </view> -->
			</scroll-view>
		</view>
		<view class='mask' catchtouchmove="true" :hidden='waitPay.waitPay==false' @click='close'></view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		setCouponReceive
	} from '@/api/api.js';
	export default {
		props: {
			waitPay: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		data() {
			return {
				appType: app.globalData.appType,
			};
		},
		methods: {
			close: function() {
				this.$emit('ChangWaitPayClone');
			},
			selectId(index) {
				this.$emit('selectItems', index);
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.mask{
		z-index: 49 !important;
	}
	
	.orderCou{
		position: absolute;
		right: 20rpx;
		top:50%;
		margin-top: -20rpx;
	}
	.orderCou .iconfont{
		font-size: 40rpx;
	}
	.orderCou .svip{
		color:#EDBB75;
	}

	.coupon-list-window {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 16rpx 16rpx 0 0;
		z-index: 50;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}

	.coupon-list-window.on {
		transform: translate3d(0, 0, 0);
	}
	
	.coupon-list-window.cart{
		padding-bottom: 200rpx;
		// padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		// padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.coupon-list-window .title {
		height: 124rpx;
		width: 100%;
		text-align: center;
		line-height: 124rpx;
		font-size: 32rpx;
		font-weight: bold;
		position: relative;
	}

	.coupon-list-window .title .iconfont {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 35rpx;
		color: #8a8a8a;
		font-weight: normal;
	}

	.coupon-list-window .coupon-list {
		height: 721rpx;
		padding: 0;
		margin: 0;
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
	}
	
	.coupon-list-window .coupon-list-inner {
		padding: 18rpx 30rpx 0 30rpx;
		overflow: hidden;
	}

	.coupon-list-window .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 192rpx auto 243rpx auto;
	}

	.coupon-list-window .pictrue image {
		width: 100%;
		height: 100%;
	}

	.pic-num {
		color: #fff;
		font-size: 24rpx;
	}

	.line-title {
		width: 70rpx;
		height: 32rpx !important;
		padding: 0 10rpx;
		line-height: 30rpx;
		text-align: center;
		background: var(--view-minorColorT);
		border: 1px solid var(--view-theme);
		opacity: 1;
		border-radius: 20rpx;
		font-size: 18rpx;
		color: var(--view-theme);
		margin-right: 12rpx;
		box-sizing: border-box;
	}

	.line-title.gray {
		border-color: #C1C1C1!important;
		color: #C1C1C1!important;
		background-color: #F7F7F7!important;
	}

	.nav {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 106rpx;
		border-bottom: 2rpx solid #F5F5F5;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		background-color: #FFFFFF;
		font-size: 30rpx;
		color: #999999;
	}

	.nav .acea-row {
		border-top: 5rpx solid transparent;
		border-bottom: 5rpx solid transparent;
	}

	.nav .acea-row.on {
		border-bottom-color: var(--view-theme);
		color: #282828;
	}

	.nav .acea-row:only-child {
		border-bottom-color: transparent;
	}

	.occupy {
		height: 106rpx;
	}
	
	.data-list {
		.item {
			width: 100%;
			padding:  24rpx;
			box-sizing: border-box;
			
			&~.item {
				border-top: 2rpx solid #F5F5F5;
			}
			
			.content {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 144rpx;
				
				.left {
					height: 144rpx;
					width: 72rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 10rpx;
				}
				
				.middle {
					flex: 1;
					
					.count {
						font-size: 28rpx;
						font-weight: bold;
						color: #1F1F1F;
					}
					
					.time {
						margin-top: 24rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 24rpx;
						
						.red {
							color: #FF271F;
						}
						
						.green {
							color: #16B86C;
						}
					}
				}
				
				.right {
					text-align: right;
					.num {
						font-size: 36rpx;
					}
					.money-add {
						margin-top: 20rpx;
						color: #999;
						font-size: 24rpx;
					}
				}
			}
			
			
			
			
			.stage {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				
				text {
					font-size: 28rpx;
					font-weight: bold;
					color: #1F1F1F;
				}
				
				.num {
					font-size: 36rpx;
				}
			}
		
			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 24rpx;
				
				.time {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 24rpx;
					
					.red {
						color: #FF271F;
					}
					
					.green {
						color: #16B86C;
					}
				}
				
				.price {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}
	
</style>
